<template>
	<view>
		<!-- <button @tap="click">按钮</button> -->

		<view :class="[color2]"></view>
		<view>
			<!-- <button @tap="click">按钮</button> -->
			<view :class="[color, 'bg2']">
				<!-- 搜索 -->
				<view class="white">
					<view class="search common">
						<u-search action-text="取消" placeholder-color="#bbb" placeholder="520元红包抢先领" v-model="keyword" :clearabled="true" show-action></u-search>
						<view class="postxt" @tap="none"></view>
					</view>
					<view class="history">
						历史记录
						<u-icon name="trash-fill" color="#999" size="20"></u-icon>
					</view>
				</view>
				<view class="hot">
					<view class="">热门搜索</view>
					<view class="txt2">
						<text class="red text">520元礼包抢先领</text>
						<text class="text">520单鞋</text>
						<text class="text">墨镜</text>
						<text class="text">夏凉被</text>
						<text class="text">新品上市</text>
						<text class="text">日式</text>
						<text class="text">母亲节</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'mysearch',
	data() {
		return {
			color2: '',
			tranbg: 'black',
			keyword: '',
			color: 'trans'
		};
	},
	// props: {
	// 	color: {
	// 		type: String,
	// 		default: 'trans'
	// 	}
	// },
	methods: {
		click() {
			console.log('click');
			this.color = 'zero';
			this.color2 = 'black2';
		},
		none() {
			console.log(1);
			console.log('none');
			this.color = 'trans';
			this.color2 = 'white2';
		}
	}
};
</script>

<style lang="scss">
.black2 {
	background-color: black;
	opacity: 0.8;
	transform: opacity 1s;
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	top: 0;
}
.white2 {
	background-color: black;
	opacity: 0;
	transform: opacity 1s;
	position: absolute;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	top: 0;
}
.postxt {
	// background-color: #ccc;
	width: 90rpx;
	height: 70rpx;
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}
.bg2 {
	width: 100vw;
	height: 100vh;
	background-color: #efefef;
	position: absolute;
	top: 0;
}
.zero {
	transform: translateX(0vw);
	transition: transform 0.8s ease-out;
	z-index: 1;
	position: absolute;
}
.trans {
	transform: translateX(100vw);
	transition: transform 0.8s ease-out;
	z-index: 1;
	position: absolute;
}
//

.white {
	background-color: #fff;

	.search {
		margin: 0rpx 20rpx 0;
		padding: 26rpx 0;
		position: relative;
		z-index: 1;
	}
	.history {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 44rpx 30rpx 24rpx;
		align-items: center;
		margin-bottom: 30rpx;
	}
}

.hot {
	background-color: #fff;
	padding: 20rpx 20rpx 50rpx;
	box-sizing: border-box;

	.txt2 {
		font-size: 30rpx;
		width: 100%;
		.red {
			color: #f40;
			border: 1px solid #f40;
		}
		text {
			border-radius: 8rpx;
			border: 1px solid #ccc;
			padding: 4rpx 10rpx;
			// height: auto !important;
			color: #aaa;
			margin-right: 20rpx;
			display: inline-block;
			margin-top: 20rpx;
		}
	}
}
</style>
